<template>
    <section :style="sectionStyle">
        <div class="container">
            <div class="accordion">
                <div class="accordion-item" :style="accordionItemStyle" v-for="(item, idx) in items" :key="idx">
                    <a class="accordion-link" :style="accordionLinkStyle" href="javascript:void(0);" @click="toggle(idx)">
                        <div class="flex">
                            <h3>{{ item.title }}</h3>
                            <ul>
                                <li v-for="tag in item.tags" :key="tag">{{ tag }}</li>
                            </ul>
                        </div>
                        <i class="icon icon-md-arrow-forward" v-show="!open[idx]">→</i>
                        <i class="icon icon-md-arrow-down" v-show="open[idx]">↓</i>
                    </a>
                    <div class="answer" :style="open[idx] ? 'max-height: 20rem;' : 'max-height: 0;'">
                        <!-- 具名插槽，暴露item和idx -->
                        <slot name="content" :item="item" :index="idx">
                            <!-- 默认内容（可选） -->
                            <p>{{ item.content }}</p>
                        </slot>
                    </div>
                    <hr>
                </div>
            </div>
        </div>
    </section>
</template>

<script setup>
import { ref, watch,computed } from 'vue'
const props = defineProps({
    items: {  type: Array,required: true},
    accordionColor: {type: String , default : ""}, // 折叠项整体背景色
    accordionLinkColor : {type: String , default : ""}, // 折叠项标题背景色
    fontFamily : {type: String , default : ""}, // 调整字体
})



const accordionItemStyle = computed(() => {
    const style = {}
    style.backgroundColor = props.accordionColor
    return style
})


const accordionLinkStyle = computed(() => {
    const style = {}
    style.backgroundColor = props.accordionLinkColor
    return style
})

const sectionStyle = computed(() => {
    const style = {}
    style.fontFamily = props.fontFamily
    return style
})

const open = ref(props.items.map(() => false))
watch(
    () => props.items,
    (newItems) => {
        open.value = newItems.map(() => false)
    }
)
function toggle(idx) {
    open.value[idx] = !open.value[idx]
}
</script>

<style scoped>
/*Section used for centering process*/
section {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    /* font-family: 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif; */
}

.container {
    width: 100%;
    max-width: 80rem;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.accordion-item {
    border-radius: .4rem;
}

.accordion-item hr {
    border: 1px solid rgba(255, 255, 255, 0.5);
}

.accordion-link {
    font-size: 1.6rem;
    color: rgba(255, 255, 255, .8);
    text-decoration: none;
    /* background-color: #000000; */
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 0;
}

.accordion-link h3 {
    font-weight: 500;
    font-size: 20px;
}

.accordion-link i {
    color: #e7d5ff;
    padding: .5rem;

}

.accordion-link ul {
    display: flex;
    align-items: flex-end;
    list-style-type: none;
    margin-left: 25px;
}

.accordion-link li {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.4);
    padding: 0 0 1px 5px;
}

.accordion-link div {
    display: flex;
}

.accordion-link .ion-md-arrow-down {
    display: none;
}

.answer {
    max-height: 0;
    overflow: hidden;
    position: relative;
    /* background-color: #000; */
    transition: max-height 650ms;
}

.answer p {
    color: #fff;
    font-size: 15px;
    padding: 2rem;

}
</style>
